<template>
	<div ref='chart' style='height:100%'></div>
</template>

<script>
	import echarts from 'echarts'
	let chartPx = null
	export default {
		props : {
			height : {
				type : Number,
				default : 400
			},
			
			xAxis : {
				type : Array,
				default : []
			},
			
			series : {
				type : Array,
				default : []
			}
		},
		
		data() {
			return {
				
			}
		},
		
		methods : {
			draw : function(){
				let chartPxOption = {
					backgroundColor : '#ffffff',
					xAxis: {
						data : this.xAxis,
						axisLabel: {
							inside: false,
							rotate : 45,
							textStyle: {
								color: '#000'
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						z: 10
					},
					yAxis: {
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							textStyle: {
								color: '#999'
							}
						}
					},
					
					series: [
						{
							type: 'bar',
							barWidth : '25',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0, 0, 0, 1,
										[
											{offset: 0, color: '#83bff6'},
											{offset: 0.5, color: '#188df0'},
											{offset: 1, color: '#188df0'}
										]
									)
								},
								emphasis: {
									color: new echarts.graphic.LinearGradient(
										0, 0, 0, 1,
										[
											{offset: 0, color: '#2378f7'},
											{offset: 0.7, color: '#2378f7'},
											{offset: 1, color: '#83bff6'}
										]
									)
								}
							},
							data : this.series
						}
					]
				}
				
				chartPx.setOption(chartPxOption, true)
			}
		},
		
		watch : {
			xAxis : function(){
				this.draw()
			},
			
			series : function(){
				this.draw()
			}
		},
		
		mounted () {
			chartPx = echarts.init(this.$refs.chart)
		}
	}
</script>

<style>

</style>
